<template>
  <div>
    <home>
      <div slot="conter" class="topaa" data-attr="登录界面">
        <a href="#">
          <h2>登录界面</h2>
        </a>
      </div>
    </home>
    <div class="a">
      <div class="b"></div>
      <div class="c">
        <div class="d">
          <h1>登录/注册</h1>
          <input type="text" class="e" placeholder="请输入手机号" v-model="phone">
          <input type="text" class="e" placeholder="验证码" v-model="code">
          <!--          <input type="password" class="e" placeholder="PASSWORD">-->
          <div>
            <div class="col-xs-5">
              <el-button :disabled="bool" :plain="true" @click="MessageClick">{{message}}</el-button>
            </div>
            <div class="col-xs-5">
              <span class="error-msg"></span>
            </div>
          </div>
          <a href="#" class="f">忘记密码?</a>
          <a href="#" class="g" @click="LoginClick()">登录</a>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Home from "../home/Home";
  import {Message, Login} from "network/login"

  export default {
    name: "Login",
    components: {Home},
    data() {
      return {
        phone: '',
        code: '',
        nickname: '',
        avatar: '',
        message: '验证码',
        bool: false
      }
    },
    created() {
      sessionStorage.removeItem('userInfo')
    },
    methods: {
      MessageClick() {

        if (!this.phone) {
          this.$message.error('请输入手机号');
          return
        }
        let res = /^(1[3|4|5|6|7|8|9])\d{9}$/;
        if (!res.test(this.phone)) {
          this.$message.error('输入手机格式有误');
          return
        }
        let that = this
        this.message = 60
        this.bool = true
        let timer = setInterval(function () {
          that.message--
          if (that.message <= 0) {
            that.message = '验证码'
            that.bool = false
            clearInterval(timer);
          }
        }, 1000)
        Message(that.phone).then(res => {
          console.log(res);
          that.code = res.message.code
          that.nickname = res.message.nickname
          that.avatar = res.message.avatar
          console.log(that.code, that.nickname, that.avatar);

        })

      },
      LoginClick() {
        let data_list = {
          phone: this.phone,
          code: this.code,
          nickname: this.nickname,
          avatar: this.avatar
        }
        Login(data_list).then(res => {
          console.log(res);
          let user_list = {
            token: res.data.token,
            avatar: String(data_list.avatar),
            nickname: data_list.nickname
          }
          console.log(user_list);
          sessionStorage.setItem('userInfo', JSON.stringify(user_list))
          this.$store.commit('initUserInfo',user_list)
          this.$router.push({
            path:'/home'
          })
        })
      }

    }
  }
</script>

<style scoped>
  .a {
    z-index: 10;
    position: relative;
    top: 100px;
    left: 22%;
    width: 1100px;
    height: 550px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .8);
    display: flex;
  }

  .b {
    width: 800px;
    height: 550px;
    background-image: url("../../components/../static/201515-158211451517f1.jpg");
    /* 让图片适应大小 */
    background-size: cover;
  }

  .c {
    width: 300px;
    height: 550px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .d {
    width: 250px;
    height: 500px;
  }

  .d h1 {
    font: 900 30px '';
  }

  .e {
    width: 230px;
    margin: 20px 0;
    outline: none;
    border: 0;
    padding: 10px;
    border-bottom: 3px solid rgb(80, 80, 170);
    font: 900 16px '';
  }

  .f {
    float: right;
    margin: 10px 0;
  }

  .g {
    position: absolute;
    margin: 20px;
    bottom: 40px;
    display: block;
    width: 200px;
    height: 60px;
    font: 900 30px '';
    text-decoration: none;
    line-height: 50px;
    border-radius: 30px;
    background-image: linear-gradient(to left,
    #9c88ff, #3cadeb);
    text-align: center;
  }
</style>